<template>
	<view class="container">
		<view class="goods" v-if="goods">
			<image :src="$img_base_url(goods.image)" mode="aspectFill"></image>
			<view class="g-info">
				<view class="name">
					<view class="text">
						{{goods.title}}
					</view>
				</view>
				<view class="spec">
					<view class="text">
						{{goods.difference}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="type-box">
			<view class="item" @click="toSubmit(1)">
				<view class="icon">
					<image :src="$img_path('/pagesMine/33.png')" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="left">
						<view class="title">
							仅退款(无需退货)
						</view>
						<view class="text">
							未收到货/己拒收，或与商家协商一致不用退货只退款
						</view>
					</view>
					<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="item" @click="toSubmit(2)">
				<view class="icon">
					<image :src="$img_path('/pagesMine/34.png')" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="left">
						<view class="title">
							退货退款
						</view>
						<view class="text">
							己收到货，需退还收到的货物
						</view>
					</view>
					<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="item" @click="toSubmit(3)">
				<view class="icon">
					<image :src="$img_path('/pagesMine/35.png')" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="left">
						<view class="title">
							换货
						</view>
						<view class="text">
							已收到货，需更换收到的货物
						</view>
					</view>
					<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRefundInfo } from '@/utils/api/mallApi.js'
	export default {
		data() {
			return {
				goods:null,
				order_type:null,
				order_id:null
			};
		},
		onLoad(options) {
			this.goods = JSON.parse(options.goods)
			this.order_type = options.order_type
			this.order_id = options.order_id
		},
		methods:{
			toSubmit(type){
				uni.navigateTo({
					url:`/pagesMine/shopGoodsOrder/apply_return/submit_form?type=${type}&goods=${JSON.stringify(this.goods)}&order_type=${this.order_type}&order_id=${this.order_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 0 22rpx;
	box-sizing: border-box;
	.goods{
		display: flex;
		align-items: center;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		&>image{
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
		}
		.g-info{
			width: calc(100% - 180rpx);
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			.name{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.text{
					width: 88%;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}
			}
			.spec{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 20rpx;
				.text{
					width: 90%;
					font-weight: 400;
					font-size: 28rpx;
					color: #505050;
					line-height: 40rpx;
				}
			}
		}
	}
	.type-box{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.item{
			padding: 32rpx 22rpx 30rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;
			&:not(:first-child){
				border-top: 1rpx solid rgba(0, 0, 0, 0.10);
			}
			.icon{
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.info{
				width: calc(100% - 40rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					width: calc(100% - 86rpx);
					.title{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
					}
					.text{
						font-weight: 400;
						font-size: 28rpx;
						color: #505050;
						line-height: 40rpx;
						margin-top: 10rpx;
					}
				}
				&>image{
					width: 18rpx;
					height: 34rpx;
				}
			}
		}
	}
}
</style>
